import React from 'react';
import {Card, Button, Calendar, Table} from 'antd';
import moment from 'moment';
import './ProjectStatus.less'

const columns = [{
  title: '项目状态',
  dataIndex: 'name',
  width:90,
}, {
  title: '采购编号',
  dataIndex: 'numb',
  width:90,
}, {
  title: '采购单位',
  dataIndex: 'address',
  width:110,
}, {
  title: '项目名称',
  dataIndex: 'projectName',
  width:110,

}, {
  title: '项目负责人',
  dataIndex: 'person',
  width:80,
}, {
  title: '会议类型',
  dataIndex: 'type',
  width:90,
}, {
  title: '时间安排',
  dataIndex: 'time',
  width:160,
}];

const data = [{
  key: '1',
  name: '中标结果登记',
  numb: 'JSZC-2018-359',
  address: '江苏省生态环境监控中心',
  projectName:'江苏省省级定点电子商务平台',
  person:'张国栋',
  type:'开评标',
  time:'开标: 2018-11-27 08:00 评标五室上午'
}, {
  key: '2',
  name: '中标结果登记',
  numb: 'JSZC-2018-359',
  address: '江苏省生态环境监控中心',
  projectName:'江苏省省级定点电子商务平台',
  person:'张国栋',
  type:'开评标',
  time:'开标: 2018-11-27 08:00 评标五室上午'
}, {
  key: '3',
  name: '中标结果登记',
  numb: 'JSZC-2018-359',
  address: '江苏省生态环境监控中心',
  projectName:'江苏省省级定点电子商务平台',
  person:'张国栋',
  type:'开评标',
  time:'开标: 2018-11-27 08:00 评标五室上午'
},{
  key: '4',
  name: '中标结果登记',
  numb: 'JSZC-2018-359',
  address: '江苏省生态环境监控中心',
  projectName:'江苏省省级定点电子商务平台',
  person:'张国栋',
  type:'开评标',
  time:'开标: 2018-11-27 08:00 评标五室上午'
}, {
  key: '5',
  name: '中标结果登记',
  numb: 'JSZC-2018-359',
  address: '江苏省生态环境监控中心',
  projectName:'江苏省省级定点电子商务平台',
  person:'张国栋',
  type:'开评标',
  time:'开标: 2018-11-27 08:00 评标五室上午'
}, {
  key: '6',
  name: '中标结果登记',
  numb: 'JSZC-2018-359',
  address: '江苏省生态环境监控中心',
  projectName:'江苏省省级定点电子商务平台',
  person:'张国栋',
  type:'开评标',
  time:'开标: 2018-11-27 08:00 评标五室上午'
}, {
  key: '7',
  name: '中标结果登记',
  numb: 'JSZC-2018-359',
  address: '江苏省生态环境监控中心',
  projectName:'江苏省省级定点电子商务平台',
  person:'张国栋',
  type:'开评标',
  time:'开标: 2018-11-27 08:00 评标五室上午'
}];

export default class ProjectStatus extends React.Component {

  static defaultProps = {
    data: [
      {
        count: 1,
        title: '本周',
        notifydata: [{day: '2018-11-08', num: 11}, {day: '2018-11-09', num: 11}, {day: '2018-11-30', num: 11}],
        timeData:data,
      },
      {count: 20, title: '本周'},
      {count: 41, title: '本周'},
    ]
  }

  state = {
    value: moment(new Date()),
    selectedValue: moment(new Date()),
    activeButtonIndex: 0,
    cardData: this.props.data[0]
  }

  onButtonClick = (index) => {
    this.setState({
      activeButtonIndex: index,
      cardData: this.props.data[index],
    })
  }
  onSelect = (value) => {
    this.setState({
      value,
      selectedValue: value,
    });
  }
  onPanelChange = (value) => {
    this.setState({value});
  }


  dateCellRender = (value) => {
    if(this.state.cardData.notifydata&&this.state.cardData.notifydata.length>0){
      return this.state.cardData.notifydata.map((item, index) => {

        if (value.format('YYYY-MM-DD') === item.day) {
          return (
            <div key={item.day} className="calendar-dot">{item.num}</div>
          );
        }
      })
    }
  }


  render() {
    const {activeButtonIndex} = this.state
    return (
      <Card
        className="project-status"
        title={
          <div className="project-status-card-title-container flex-box flex-center">
            <span className="project-status-card-title-container-title">开标/答疑项目</span>
            {
              this.props.data.map((item, index) => {
                return (
                  <div
                    onClick={() =>
                      index !== activeButtonIndex && this.onButtonClick(index)}
                    className={`project-status-card-title-container-button1 ${activeButtonIndex === index && 'active-button'}`}>
                    <span>{item.title}</span>
                    <span className='title-button-text'>{`(${item.count})`}</span>
                  </div>
                )
              })
            }
            <Button
              onClick={()=>this.props.onPrintClick&&this.props.onPrintClick()}
              className="project-status-card-title-container-button4">打印
            </Button>
          </div>

        }
        extra={<Button
          onClick={()=>this.props.onMorePress&&this.props.onMorePress()}
          className='project-status-extra-button'>更多</Button>}>
        <div className="project-status-content flex-box flex">
          <div className="calendar-container">
            <Calendar
              value={this.state.value}
              onSelect={this.onSelect}
              dateCellRender={this.dateCellRender}
              fullscreen={false} onPanelChange={this.onPanelChange}/>
          </div>
          <div className="table-container flex">
            <Table
              columns={columns}
              dataSource={this.state.cardData.timeData}
              bordered
            />
          </div>
        </div>
      </Card>
    )
  }
}
